<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in name">{{item}}</li>
    </ul>

    <button @click="fun">按钮</button>
</div>
<!-- vue js库-->
<script src="../vue.js"></script>

<script>

    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            name: ['张三', '李四', 'aaa', 'bbb']
        },
        methods: {
            fun() {

                /* 直接修改数组中的某个元素不是响应式  通过方法是响应式的*/

                this.name[1]='ffff'  //页面不会改变


                //    splice()方法

                //删除   删除1个
                //     console.log(this.name.splice(1, 1));

                //删除  替换  可以理解为  删除1个  替换两个
                //   console.log(this.name.splice(1, 1,'111','222'));

                //插入   第二个参数为0   可以理解为  删除0  替换两个
                //     console.log(this.name.splice(1, 0, '111', '222'));


                // pop()  末尾删除

              //  this.name.pop()

                //push()  末尾添加

            //    this.name.push('11')


                // shift()  首位  删除
          //      this.name.shift()

                // shift()  首位  添加
        //        this.name.unshift('11')


                // sort()排序   reverse()反转


          //      this.name.reverse()
            }
        }
    })


</script>
</body>
</html>